<template>
  <div class="goods-copy-container">
    <div class="control">
      <div class="fl">
        <el-button type="primary" :icon="Delete" @click="delFn">删除</el-button>
        <el-button type="primary" @click="addGoodsTemplate">添加商品模板</el-button>
        <el-button type="primary" @click="addDraft">添加到草稿箱</el-button>
      </div>
      <el-button :icon="RefreshRight" circle />
    </div>
    <div class="content">
      <el-table :data="goodsList" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="spu" label="SPU" width="220" />
        <el-table-column prop="name" label="商品名称" show-overflow-tooltip />
        <el-table-column prop="source" label="来源店铺" width="220" show-overflow-tooltip />
        <el-table-column prop="createrTime" label="添加时间" width="220" />
      </el-table>
      <div class="page">
        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </div>
    </div>

    <!--新增商品模板-->
    <el-dialog v-model="dialogGoodsVisible" title="商品列表" width="80%" class="goods-dialog">
      <div class="cnb">
        <div class="box">
          <div class="search">
            <el-form :inline="true" :model="formData">
              <el-form-item label="店铺">
                <el-select v-model="formData.shop" placeholder="请选择" clearable>
                  <el-option label="店铺一" value="1" />
                  <el-option label="店铺二" value="2" />
                </el-select>
              </el-form-item>
              <el-form-item label="SKC">
                <el-input v-model="formData.skc" placeholder="请输入SKC，多个用,隔开" clearable />
              </el-form-item>
              <el-form-item label="商品名称">
                <el-input v-model="formData.name" placeholder="请输入商品名称" clearable />
              </el-form-item> 
              <el-form-item>
                <el-button @click="onReset">重置</el-button>
                <el-button type="primary" @click="onSubmit">查询</el-button>
              </el-form-item>
            </el-form>
          </div>
          <div class="content">
            <el-table :data="gridData">
              <el-table-column type="selection" width="55" />
              <el-table-column property="SPUID" label="SPU ID" width="120" />
              <el-table-column property="SKCID" label="SKC ID" width="120" />
              <el-table-column property="name" label="商品名称" show-overflow-tooltip />
              <el-table-column property="createrTime" label="创建时间" width="200" />
            </el-table>
          </div>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogGoodsVisible = false">取消</el-button>
          <el-button type="primary" @click="dialogGoodsVisible = false">
            添加到模板
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive, onMounted, ref } from 'vue'
import { Delete, RefreshRight } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const selectedList = ref([])
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
const goodsList = reactive([
  {
    spu: '434464260',
    name: '圣诞套装护手霜10支装（每种颜色2支）',
    source: '拼多多',
    createrTime: '2021-05-21 10:20:20'
  },
  {
    spu: '116795782',
    name: '415pcs / Set 18 Size Universal Car Trim Clip Pin Push Retainer Panel Bumper Fastener Fender Kit HE06',
    source: '拼多多',
    createrTime: '2021-05-21 10:20:20'
  }
])

const handleSizeChange = (val) => { }
const handleCurrentChange = (val) => { }
const handleSelectionChange = (val) => {
  selectedList.value = val
}

const delFn = () => {
  if (selectedList.value.length === 0) {
    ElMessage({
      message: '请选择商品',
      type: 'warning',
    })
    return false
  }
  console.log(selectedList.value)
}

const addDraft = () => {
  if (selectedList.value.length === 0) {
    ElMessage({
      message: '请选择商品',
      type: 'warning',
    })
    return false
  }
}

const dialogGoodsVisible = ref(false)
const formData = reactive({
  skc: '',
  name: '',
  shop: '1'
})
const gridData = reactive([
  {
    SPUID: '434464260',
    SKCID: '5760840036',
    name: '圣诞套装护手霜10支装（每种颜色2支）',
    createrTime: '2021-05-21 10:20:20'
  },
  {
    SPUID: '116795782',
    SKCID: '9958331069',
    name: '415pcs / Set 18 Size Universal Car Trim Clip Pin Push Retainer Panel Bumper Fastener Fender Kit HE06',
    createrTime: '2021-05-21 10:20:20'
  }
])
const addGoodsTemplate = () => {
  dialogGoodsVisible.value = true
}
</script>

<style lang="scss" scoped>
.goods-copy-container {
  margin: 20px;
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 4px 6px -2px rgba(15, 15, 21, .15);
  padding: 20px;
  min-height: 100%;

  :deep(.notice-html) {

    div,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    img {
      width: 100% !important;
    }
  }

  .control {
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
  }

  .page {
    margin-top: 20px;
    overflow: hidden;

    .el-pagination {
      float: right;
    }
  }
}

.goods-dialog {
  .cnb {
    background: #f3f6f9;
    padding: 20px;
  }

  .box {
    padding: 20px;
    background: #fff;
  }
}
</style>